import { View ,Text,Image } from "@tarojs/components";
import React ,{ useCallback }from "react";
import {  useActionSheet } from "@expo/react-native-action-sheet";
import {  openCamera,openPicker } from "react-native-image-crop-picker";
import defaultAvatar from "@assets/images/defaultAvatar.jpg";
import "./index.scss";
import { useAppSelector } from "@src/store";
import { isAndriod } from "@src/utils";
import { uploadFiles } from "@src/utils/request/upload";
import { updateUserInfo } from "@src/service";


const  UserEdit = (props)=>{
    const { data } = useAppSelector(state=>state.userInfo);
    console.log(data,"data");
    const { showActionSheetWithOptions } = useActionSheet();
    console.log(data);
    const chooseAvatar = useCallback(()=>{

        showActionSheetWithOptions({
            options:["拍照","相册","取消"],
            cancelButtonIndex:2,
            textStyle:{
               textAlign:"center",
               width: "100%"
            },
        },async (selectIndex)=>{
            let res:AnyObjType = {};
            if(selectIndex == 0){
                res = await openCamera({
                    cropping:true,
                    mediaType: "photo",
                    width: 400,
                    height: 400,
                    cropperStatusBarColor:"black"
                });
            }else if(selectIndex == 1){
                res = await openPicker({
                    width: 400,
                    height: 400,
                    cropping:true,
                    cropperStatusBarColor:"black",
                    showCropGuidelines:false,
                });
            }
            const filePath = res.path;
            const uri = isAndriod() ? filePath : filePath.replace("file://", "");
            const pathArr = uri.split("/");
            const fileObj = {
                uri:uri,
                name:pathArr[pathArr.length - 1],
                type:res.mime
            };
            const result = await uploadFiles("medias/file/", [fileObj]);
            if(Object.is(result.data.code,0)){
                const fileId = result.data.data.id;
                const response = await updateUserInfo(data.id,{
                    avatar:fileId
                });
                console.log(response,"response");
            }
        });
        
    },[showActionSheetWithOptions,data.id]);













 
    return (<View className="userEdit">
        <View className="userEdit__item" onClick={chooseAvatar}>
            <View className="userEdit__item__label">头像</View>
            <Image className="userEdit__item__avatar" src={defaultAvatar} />
            <Text> {">"} </Text>
        </View>
        <View className="userEdit__line" />
        <View className="userEdit__item">
            <View className="userEdit__item__label">昵称</View>
            <View>用户212343</View>
            <Text> {">"} </Text>
        </View>
        <View className="userEdit__line" />
        <View className="userEdit__item">
            <View className="userEdit__item__signaure">签名</View>
            <View>用户212343</View>
            <Text> {">"} </Text>
        </View>
        <View className="userEdit__line" />
        <View className="userEdit__item">
            <View className="userEdit__item__gender">性别</View>
            <View>用户212343</View>
            <Text> {">"} </Text>
        </View>
        <View className="userEdit__line" />
        <View className="userEdit__item">
            <View className="userEdit__item__signaure">生日</View>
            <View>未设置</View>
            <Text> {">"} </Text>
        </View>
        <View className="userEdit__line" />
        <View className="userEdit__item">
            <View className="userEdit__item__city">城市</View>
            <View>未设置</View>
            <Text> {">"} </Text>
        </View>
    </View>);
};

export default UserEdit;